<template>
<el-form ref="form" :model="form" label-width="120px" style="width: 1000px;margin:auto;margin-top: 20px;">
  <el-form-item label="数据类型">
    <el-radio v-model="uploadType" label="1">上传文件</el-radio>
    <el-radio v-model="uploadType" label="2">上传文件夹</el-radio>
  </el-form-item>



  <el-form-item label="上传内容">
    <div class="uploadFileDiv" v-show="uploadType == 1">
      <el-select v-model="sourceFileType" placeholder="请选择转换前的类型">
          <el-option label="nii" value="nii"></el-option>
          <el-option label="nii.gz" value="nii.gz"></el-option>
        </el-select>
      <el-select v-model="targetFileType" placeholder="请选择转换后的类型">
          <el-option label="nii.gz" value="nii.gz"></el-option>
          <el-option label="nii" value="nii"></el-option>
          <el-option label="dcm" value="dcm"></el-option>
          <el-option label="mhd_raw" value="mhd_raw"></el-option>
        </el-select>
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        accept=".nii"
        multiple
        :http-request="uploadFiles"
        :show-file-list="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div class="title1">nii格式转换成nii.gz格式(请上传文件)</div>

    </div>
    <div class="uploadFolderDiv" v-show="uploadType == 2">
      <el-select v-model="sourceFileType" placeholder="请选择转换前的类型">
          <el-option label="dcm" value="dcm"></el-option>
          <el-option label="mhd_raw" value="mhd_raw"></el-option>
        </el-select>
        <el-select v-model="targetFileType" placeholder="请选择转换后的类型">
          <el-option label="nii.gz" value="nii.gz"></el-option>
          <el-option label="nii" value="nii"></el-option>
          <el-option label="dcm" value="dcm"></el-option>
          <el-option label="mhd_raw" value="mhd_raw"></el-option>        </el-select>

      <uploader
        ref="uploader"
        class="uploader-example"
        @file-success="onFileSuccess"
        @complete="completeUpload"
      >
        <uploader-btn id="uploader-upload-btn"  :directory="true">选择文件夹</uploader-btn>
      </uploader>
      <div class="title1">mhd、raw、dcm格式转换成nii.gz格式(请上传文件夹)</div>
    </div>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="startTransformFile" v-show="uploadType == 1">开始转换</el-button>
    <el-button type="primary" @click="startTransformFolder" v-show="uploadType == 2">开始转换</el-button>
  </el-form-item>
</el-form>
</template>

<script>
import axios from "axios";

export default {
  name: "Transform",
  data() {
    return {
      form: {},
      uploadType: '1',
      fileList: [],
      fileObjects: [],
      folder: Object,
      sourceFileType: '', // 转换前的类型
      targetFileType: 'nii.gz', // 转换后的类型，默认为 nii.gz

    };
  },

  methods: {
    onFileSuccess(rootFile) {
      // 上传成功获取到根文件夹
      this.folder = rootFile
      console.log(rootFile);
    },
    uploadFiles(param) {
      console.log(param);
      this.fileList = [param.file.name]
      // console.log(this.fileList)
      this.fileObjects.push(param.file)
    },
    startTransformFile() {
      const fileObject = this.fileObjects[0]
      console.log(fileObject);
      const formData = new FormData();
      formData.append("fileobj", fileObject);
      const config = {
        responseType: 'arraybuffer',
        headers: {
          "X-TOKEN": "xxx"
        }
      }
      axios
        .post("/transform/file", formData, config)
        .then(
          resp =>{
            const blob = new Blob([resp.data])
            const link = document.createElement('a')
            link.download = fileObject.name+'.gz' // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href)  // 释放 bolb 对象
            document.body.removeChild(link) // 下载完成移除元素
          })
    },
    startTransformFolder() {
      console.log("Starting transform folder")
      const folderObject = this.folder
      const formData = new FormData()
      for(var i = 0; i < this.folder.fileList.length; i++) {
        console.log("fileobj" + i.toString());
        formData.append("fileobj" + i.toString(), this.folder.fileList[i].file)
      }
      const config = {
        responseType: 'arraybuffer',
        headers: {
          "X-TOKEN": "xxx"
        }
      }
      axios
        .post("/transform/folder",formData, config)
        .then(
          resp => {
            console.log(resp.data)
            const blob = new Blob([resp.data])
            const link = document.createElement('a')
            let fileName = resp.headers["content-disposition"].split("=")[1];
            link.download = decodeURI(fileName)     //this.folder.name + '.nii.gz' // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href)  // 释放 bolb 对象
            document.body.removeChild(link) // 下载完成移除元素
          })
    }
  },

  watch: {
    uploadType(newValue) {
      this.sourceFileType = ''; // 重置转换前的类型
      this.targetFileType = 'nii.gz'; // 重置转换后的类型
    },
}

};
</script>

<style scoped>
.title1 {
  font-size: 16px;
  color:darkgray;
  font-style: italic;
}

.upload-demo {
  width: 80%; /* 调整上传文件框的宽度 */

}

.el-upload__text {
  font-size: 20px;
}

#uploader-upload-btn {
  color: #909399;
  background-color: #fff;
  border-color: #d9d9d9;
  font-size: 16px;
  border-radius: 3px;
  padding: 7px 15px;
  outline: 0;
}
</style>
